@import "reset.css";
* {
  padding: 0;
  margin: 0;
  outline: none;
}

/*这一句是用来解决在安卓上的点击出现篮框问题*/
body{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  font-size: 26px;width: 640px;height: 100vh;margin:0 auto;
  background: #edf1f4;
}

.main {
  height: 100vh;
}
img{display: block;width: 100%;}

.header {
  background : #F3F3F3;display: flex;
  .header_li {
    height : 64px;line-height: 64px;text-align: center;cursor: pointer;
    flex:1;
    &.active {
      .header_a {
        border-bottom: 1px solid #df3031;
        color : #df3031;
      }
    }
    .header_a {
      color : #000;
      font-weight: bold;
      display: inline-block;
      height : 63px;
      border-bottom: 1px solid #F3F3F3;
      font-size : 28px;
    }
  }
}

.content-wrapper{
  height: calc(100vh - 64px);box-sizing: border-box;
  overflow-y: auto;padding-bottom: 30px;
}

.idx_ppt {
  height: 340px;width: 640px;margin: 5px auto;position: relative;overflow: hidden;
  .swiper {
    .swiper-wrapper {
      display: flex;width: 100%;height: 100%;
      .swiper-slide{
        width: 640px;height: 340px;overflow: hidden;
        img{
          height: 100%;object-fit: cover;
        }
      }
    }
    .swiper-pagination{
      width: auto;right: 0;padding: 0 30px;background: rgba(79, 79, 79, 0.51);
      bottom: 0;display: flex;height: 30px;justify-content: flex-end;align-items: center;
      .swiper-pagination-bullet{
        width: 10px;height: 10px;background: #ffffff;
      }
      .swiper-pagination-bullet-active{
        background: #fff;
      }
    }
  }
}

.menu-wrapper{
  display: flex;justify-content: space-around;padding: 40px 0;
  margin:12px 16px;border-radius: 10px;background: #fff;
  .menu-wrapper-inner{
    text-align: center;
    img{width: 90px;height: 90px;object-fit: contain;margin-bottom:8px}
    .name{
      color:#111;font-size: 22px;
    }
  }
}
.news-wrapper{
  .title{
    color:#111;font-size: 28px;
  }
  .source{
    color:#999;font-size: 19px;
  }
  img{
    width: 186px;height: 140px;border-radius: 8px;object-fit: cover;
  }
  .card{
    margin:12px 16px;padding: 16px 20px;
    border-radius: 10px;background: #fff;
  }
  .single-pic{
    display: flex;justify-content: space-between;
    .title-wrapper{
      display: flex;flex-direction: column;
      .title{margin-bottom: 30px}
      .source{margin-top: auto;}
    }
    img{
      margin-left: 40px;
    }
  }
  .single-pic-big{
    display: flex;flex-direction: column;gap: 16px;
    img{height: 285px;width: 100%}
  }
  .tri-pic{
    display: flex;flex-direction: column;gap: 16px;
    .pic-wrapper{
      display: flex;justify-content: space-between;gap:4px;
      img{
        width: 186px;height: 140px;border-radius: 8px;object-fit: cover;
      }
    }
  }
  .video-news{
    height: 306px;position: relative;margin:12px 16px;
    .title-wrapper{
      position: absolute;width: 100%;bottom: 20px;z-index: 3;
      padding: 0 20px;box-sizing: border-box;
      display: flex;justify-content: space-between;align-items: flex-end;
      .title{
        flex-grow: 0;text-overflow: ellipsis;overflow: hidden;color:#fff;
      }
      .length{
        font-size: 18px;color:#fff;
      }
    }
    .video-icon{
      width: 80px;height: 80px;z-index: 3;position: absolute;left:50%;top:50%;
      transform: translate(-50%,-50%);
      background: url("../img/ico_triangle.png") no-repeat 0 0 /contain;
    }
    .mask{
      position: absolute;height: 100%;width: 100%;border-radius: 10px;
      z-index: 2;background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
    }
    img{width: 100%;height: 100%;border-radius: 10px;}
  }
}



